@extends('layout')
@section('title')
{{trans('app.create_mpa_advert')}}
@stop
@section('content')
<script type="text/javascript">
function handleFileSelect(evt) {
	// var files = evt.target.files;
	// console.log(files);
	$(this).parent().find('.absresult').html('<i class="fa fa-check-circle success"> </i>');
}
$(document).ready(function() {
  $('input[data-toggle="tooltip"]').blur(function(){
    $(this).popover("hide");
  });

  var optionName = {
    maxCharacterSize: 35,
    warningNumber: 30,
    displayFormat : '#input/#max characters',
    originalStyle: 'hide',  
  }
  var optionDesc = {
    maxCharacterSize: 15,
    warningNumber: 10,
    displayFormat : '#input/#max characters',
    originalStyle: 'hide',  
  }
  $('#descimg_0').textareaCount(
    optionDesc, 
    function(data){
      $('#descimg_0').attr('data-content', data.input + '/' + data.max + ' characters').popover("show");
  });
  $('#descimg_1').textareaCount(
    optionDesc, 
    function(data){
      $('#descimg_1').attr('data-content', data.input + '/' + data.max + ' characters').popover("show");
  });
  $('#descimg_2').textareaCount(
    optionDesc, 
    function(data){
      $('#descimg_2').attr('data-content', data.input + '/' + data.max + ' characters').popover("show");
  });
  $('#descimg_3').textareaCount(
    optionDesc, 
    function(data){
      $('#descimg_3').attr('data-content', data.input + '/' + data.max + ' characters').popover("show");
  });
  $('#descimg_4').textareaCount(
    optionDesc, 
    function(data){
      $('#descimg_4').attr('data-content', data.input + '/' + data.max + ' characters').popover("show");
  });


  $('#titleimage_0').textareaCount(
    optionName, 
    function(data){
      $('#titleimage_0').attr('data-content', data.input + '/' + data.max + ' characters').popover("show");
  });
  $('#titleimage_1').textareaCount(
    optionName, 
    function(data){
      $('#titleimage_1').attr('data-content', data.input + '/' + data.max + ' characters').popover("show");
  });
  $('#titleimage_2').textareaCount(
    optionName, 
    function(data){
      $('#titleimage_2').attr('data-content', data.input + '/' + data.max + ' characters').popover("show");
  });
  $('#titleimage_3').textareaCount(
    optionName, 
    function(data){
      $('#titleimage_3').attr('data-content', data.input + '/' + data.max + ' characters').popover("show");
  });
  $('#titleimage_4').textareaCount(
    optionName, 
    function(data){
      $('#titleimage_4').attr('data-content', data.input + '/' + data.max + ' characters').popover("show");
  });


  $('#message').textareaCount({
    maxCharacterSize: 200,
    warningNumber: 190,
    displayFormat : '#input/#max characters'
  });

	$('.productimage').change(handleFileSelect);
  $('input[data-required=true],textarea[data-required=true],select[data-required=true]').change( function() {
    $(this).css('border-color', '#ccc');
  });
	$('#frm-create-advert').on('submit', function() {
    var err = false;
		$.each($('input[data-required=true],textarea[data-required=true],select[data-required=true]'), function() {
			if ($(this).val() == '') {
          err = true;
          $(this).css('border-color', 'red');
      }
		});
    if (err) {
      alert('All fields are required');
      return false;
    }
    if(!confirm('Are you sure want to creat advert with these data?')) {
      return false;
    }
	});
})
</script>
@if(Session::get('error'))
<div class="alert alert-danger">
  <a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>
  <strong>Error!</strong> {{Session::get('error')}}.
</div>
@endif
@if ($expried->exp <= 0 && $expried->trial_remain <= 0)
<div class="alert alert-danger">
  <a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>
  <strong>{{trans('app.error')}}!</strong> {{trans('app.account_expired_no_trial')}}
</div>
@else
  @if ($expried->trial_remain > 0)
  <div class="alert alert-info">
    <a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>
    <strong>{{trans('app.notice')}}!</strong> {{trans('app.remaining_trial', array('time' => $expried->trial_remain))}}
  </div>
  @endif
  <?php if(is_array($input)) extract($input) ?>
<div class="row">
	<div class="col-sm-5">

          <div class="portlet">

            <div class="portlet-header">

              <h3>
                <i class="fa fa-bullseye"></i>
                {{trans('app.create_mpa')}}
              </h3>

            </div> <!-- /.portlet-header -->

            <div class="portlet-content">

              <form id="frm-create-advert" method="post" action="{{ URL::to('create-ads') }}" enctype="multipart/form-data" data-validate="parsley" class="form parsley-form">

                <div class="form-group">  
                  <label for="fbpage">{{trans('app.selectfbpage')}}</label>
                  <select id="fbpage" name="fbpage" class="form-control" data-required="true">
                    <option value="">{{trans('app.please_select')}}</option>
                    @if(!$pages->isEmpty())
                    	@foreach($pages as $page)
                    	<option value="{{ $page->fb_page_id }}" <?php echo (isset($fbpage) && $fbpage == $page->fb_page_id) ? ' selected' : '' ?>>{{{ $page->page_name }}}</option>
                    	@endforeach
                    @endif
                  </select>
                </div>
                
                <div class="form-group">
                  <label for="message">{{trans('app.message')}}</label>
                  <textarea data-required="true" data-minlength="5" name="message" id="message" cols="10" rows="2" class="form-control parsley-validated"><?php echo isset($message) ? $message : '' ?></textarea>
                </div>
                <div class="alert alert-info">
                  <a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>
                  <div>- Kích thước ảnh đề xuất: 460 x 460 pixels</div>
                  <div>- Bạn phải lựa chọn ít nhất 3 ảnh sản phẩm</div>
                </div>
                <div class="form-group">
                  <div class="row">
                  	<div class="col-sm-4 img-ads">
                  		<div class="bgfile">
                  			<div class="absresult"></div>
                  			<input type="file" name="productimage[]" class="productimage">
                  		</div>
                  		<input type="text" data-toggle="tooltip" data-placement="top" data-trigger="click" placeholder="{{trans('app.link_name')}}" name="titleimage[]" maxlength="35" value="<?php echo isset($titleimage[0]) ? $titleimage[0] : '' ?>" id="titleimage_0" class="ui-popover titleimg form-control" data-required="true">
                  		<input type="text" placeholder="Link" name="linkimg[]" value="<?php echo isset($linkimg[0]) ? $linkimg[0] : '' ?>" class="linkimg form-control" data-required="true">
                  		<input type="text" data-toggle="tooltip" data-animation="false" data-placement="bottom" data-trigger="click" data-content="" maxlength="15" placeholder="{{trans('app.link_desc')}}" id="descimg_0" name="descimg[]" value="<?php echo isset($descimg[0]) ? $descimg[0] : '' ?>" class="linkimg form-control" data-required="true">
                  	</div>
                  	<div class="col-sm-4 img-ads">
                  		<div class="bgfile">
                  			<div class="absresult"></div>
                  			<input type="file" name="productimage[]" class="productimage" data-required="true">
                  		</div>
                      <input type="text" data-toggle="tooltip" data-animation="false" data-placement="top" data-trigger="click" data-content="" placeholder="{{trans('app.link_name')}}" name="titleimage[]" maxlength="35" value="<?php echo isset($titleimage[1]) ? $titleimage[1] : '' ?>" id="titleimage_1" class="ui-popover titleimg form-control" data-required="true">
                  		<input type="text" placeholder="Link" name="linkimg[]" value="<?php echo isset($linkimg[1]) ? $linkimg[1] : '' ?>" class="linkimg form-control" data-required="true">
                      <input type="text" data-toggle="tooltip" data-animation="false" data-placement="bottom" data-trigger="click" data-content="" maxlength="15" placeholder="{{trans('app.link_desc')}}" id="descimg_1" name="descimg[]" value="<?php echo isset($descimg[1]) ? $descimg[1] : '' ?>" class="linkimg form-control" data-required="true">
                  	</div>
                    <div class="col-sm-4 img-ads">
                      <div class="bgfile">
                        <div class="absresult"></div>
                        <input type="file" name="productimage[]" class="productimage">
                      </div>
                      <input type="text" data-toggle="tooltip" data-animation="false" data-placement="top" data-trigger="click" data-content="" placeholder="{{trans('app.link_name')}}" name="titleimage[]" maxlength="35" value="<?php echo isset($titleimage[2]) ? $titleimage[2] : '' ?>" id="titleimage_2" class="ui-popover titleimg form-control" data-required="true">
                      <input type="text" placeholder="Link" name="linkimg[]" value="<?php echo isset($linkimg[2]) ? $linkimg[2] : '' ?>" class="linkimg form-control" data-required="true">
                      <input type="text" data-toggle="tooltip" data-animation="false" data-placement="bottom" data-trigger="click" data-content="" maxlength="15" placeholder="{{trans('app.link_desc')}}" id="descimg_2" name="descimg[]" value="<?php echo isset($descimg[2]) ? $descimg[2] : '' ?>" class="linkimg form-control" data-required="true">
                    </div>
                    <div class="col-sm-4 img-ads">
                      <div class="bgfile">
                        <div class="absresult"></div>
                        <input type="file" name="productimage[]" class="productimage">
                      </div>
                      <input type="text" data-toggle="tooltip" data-animation="false" data-placement="top" data-trigger="click" data-content="" placeholder="{{trans('app.link_name')}}" name="titleimage[]" maxlength="35" value="<?php echo isset($titleimage[3]) ? $titleimage[3] : '' ?>" id="titleimage_3" class="ui-popover titleimg form-control">
                      <input type="text" placeholder="Link" name="linkimg[]" value="<?php echo isset($linkimg[3]) ? $linkimg[3] : '' ?>" class="linkimg form-control">
                      <input type="text" data-toggle="tooltip" data-animation="false" data-placement="bottom" data-trigger="click" data-content="" maxlength="15" placeholder="{{trans('app.link_desc')}}" id="descimg_3" name="descimg[]" value="<?php echo isset($descimg[3]) ? $descimg[3] : '' ?>" class="linkimg form-control">
                    </div>
                   	<div class="col-sm-4 img-ads">
                  		<div class="bgfile">
                  			<div class="absresult"></div>
                  			<input type="file" name="productimage[]" class="productimage">
                  		</div>
                      <input type="text" data-toggle="tooltip" data-animation="false" data-placement="top" data-trigger="click" data-content="" placeholder="{{trans('app.link_name')}}" name="titleimage[]" maxlength="35" value="<?php echo isset($titleimage[4]) ? $titleimage[4] : '' ?>" id="titleimage_4" class="ui-popover titleimg form-control">
                      <input type="text" placeholder="Link" name="linkimg[]" value="<?php echo isset($linkimg[4]) ? $linkimg[4] : '' ?>" class="linkimg form-control">
                      <input type="text" data-toggle="tooltip" data-animation="false" data-placement="bottom" data-trigger="click" data-content="" maxlength="15" placeholder="{{trans('app.link_desc')}}" id="descimg_4" name="descimg[]" value="<?php echo isset($descimg[4]) ? $descimg[4] : '' ?>" class="linkimg form-control">
                  	</div>
                  </div>
                  <label for="caption">{{trans('app.see_more_text')}}</label>
                  <input type="text" name="caption" id="caption" class="form-control" value="<?php echo isset($caption) ? $caption : '' ?>" data-required="true">
                  <label for="link">Link</label>
                  <input type="text" name="link" id="link" value="<?php echo isset($link) ? $link : '' ?>" class="form-control" data-required="true">
                  <small>{{trans('app.dont_link_to_page')}}</small>
                </div>

                <div class="form-group">
                  <button type="submit" class="btn btn-primary">{{trans('app.btn_create_advert')}}</button>
                </div>
                <!-- /.form-group -->
              </form>

            </div> <!-- /.portlet-content -->

          </div> <!-- /.portlet -->
          
        </div> <!-- /.col -->
        <div class="col-sm-7">
        	<div class="portlet">

	            <div class="portlet-header">

	              <h3>
	                <i class="fa fa-info-circle"></i>
	                {{trans('app.fields_desc')}}
	              </h3>

	            </div> <!-- /.portlet-header -->

	            <div class="portlet-content" style="text-align:center;">
	        		<img src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.2178-6/10173489_1444762775783056_1702831218_n.png" alt="" width="595">
              <h2><a class="ui-lightbox-video" href="http://www.youtube.com/watch?v=OaKCTpheHaM">>> Xem video hướng dẫn <<</a></h2>

	        	</div>
        	</div>
        </div>
      </div> <!-- /.row -->
@endif
@stop

@section('header')
<link rel="stylesheet" href="{{ URL::to('assets/js/plugins/magnific/magnific-popup.css') }}">
@stop

@section('footer')
<script src="{{ URL::to('assets/js/plugins/textarea-counter/jquery.textarea-counter.js') }}"></script>
<script src="{{ URL::to('assets/js/plugins/magnific/jquery.magnific-popup.min.js') }}"></script>
@stop
